<template>
  <div>
    <span style="font-size: 26px;color: #272727">特色场景：</span>
    <zh-form
        :span="5"
        ref="rolePageFrom2"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        :rules="rules"
    >
      <div style="width: 100%; padding: 0 20px">
        <div style="text-align: left;margin-top: 10px" v-if="disabled === false">
        </div>
        <div class="operate">
          <div style="width: 10%;">场景名称</div>
          <div style="width: 90%">
            <a-input placeholder="请输入场景名称" v-model="formData.k0402" :disabled="disabled"/>
          </div>
        </div>
        <div class="operate">
          <div style="width: 10%;">建设进度</div>
          <div style="width: 90%">
            <a-textarea placeholder="请输入建设进度" :auto-size="{ minRows: 3, maxRows: 6 }" v-model="formData.k0403" :disabled="disabled"/>
          </div>
        </div>
        <div class="operate">
          <div style="width: 10%;">场景评价</div>
          <div style="width: 90%">
            <a-textarea placeholder="请输入场景评价" :auto-size="{ minRows: 3, maxRows: 6 }" v-model="formData.k0409" :disabled="disabled"/>
          </div>
        </div>
<!--        <div class="operate">-->
<!--          <div style="width: 10%;">巡查数</div>-->
<!--          <div style="width: 90%">-->
<!--            <a-input placeholder="请输入巡查数" type="number" v-model="formData.k0404" :disabled="disabled"/>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="operate">-->
<!--          <div style="width: 10%;">访问量</div>-->
<!--          <div style="width: 90%">-->
<!--            <a-input placeholder="请输入访问量" type="number" v-model="formData.k0405" :disabled="disabled"/>-->
<!--          </div>-->
<!--        </div>-->
        <div class="title" style="margin-bottom: 10px">
          <p>图片:</p>
        </div>
        <div style="width: 100%;display: block">
          <div style="text-align: right;width: 100%"  v-show="!formData.k0407">
            <ep-button
                icon="add.svg"
                size="small"
                type="primary"
                @click="addMediaInfo()"
                :disabled="disabled"
            >添加
            </ep-button>
          </div>
          <div v-show="formData.k0407">
            <ul class="media-wrap">
              <li >
                <div class="item">
                  <div class="desc">图片标题</div>
                  <p>{{ formData.k0406}}</p>
                </div>
                <div class="item">
                  <div class="desc">文件名称</div>
                  <p>{{ formData.k0408}}</p>
                </div>
                <div class="item">
                  <div class="desc">缩略图</div>
                  <template>
                    <img
                        :src="fileShowUrl + formData.k0407"
                        @click="checkImg(formData.k0407)"
                        alt=""
                    />
                  </template>
                </div>
                <div class="item">
                  <div class="desc"></div>
                  <div class="btn-wrap">
                    <ep-button
                        size="small"
                        icon="edit.svg"
                        @click="editMediaInfo(formData)"
                        :disabled="disabled"
                    >编辑
                    </ep-button>
                    <ep-button
                        size="small"
                        type="danger"
                        icon="del.svg"
                        @click="deleteMediaInfo(formData.k0407)"
                        :disabled="disabled"
                    >删除
                    </ep-button>
                    <ep-button size="small"
                               @click="dowloadFile(formData.k0407)"
                               style="margin-left: 15px"
                    >
                      下载
                    </ep-button>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <a-modal
            :title="modalTitle"
            centered
            style="top: 20px"
            width="50%"
            destroyOnClose
            v-model="visible"
            cancelText="关闭"
            okText="保存"
            @ok="handleForm"
        >
          <character-scene-manager-media ref="characterSceneManagerMedia" :disabled="disabled"/>
        </a-modal>
      </div>
    </zh-form>
  </div>
</template>

<script>

import characterSceneManagerMedia from "@/pages/system/form/characterSceneManagerMedia";
import modal from "ant-design-vue/lib/modal";
import {fileDownloadUrl, fileShowUrl} from "@/services/system/api";

export default {
  name: "characterSceneManagerForm",
  components: {
    characterSceneManagerMedia,
  },
  props:{
  },
  data() {
    return {
      modalTitle:'',
      dictData: {},
      disabled: false,
      visible:false,
      fileShowUrl: fileShowUrl, //预览接口地址
      formData: {
        k0401: '',
        k0402:'',
        k0403: '',
        k0404: '',
        k0405: '' ,
        k0406: '',
        k0407: '',
        k0408: '',
        k0409: '',
        mediaList: [],
      },
      labelCol: {
        xs: {span: 24},
        sm: {span: 8},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      rules: {},
    };
  },
  created() {
  },
  methods: {
    init(row,operate){
      this.disabled = operate
      this.formData = row
    },
    getData(){
      return this.formData
    },
    checkImg(showId) {
      let url = this.fileShowUrl + showId;
      window.open(url, "_blank");
    },
    handleForm() {
      var dataInfo = this.$refs.characterSceneManagerMedia.dataInfo;
      if (this.modalTitle === "新增") {
        dataInfo.flag = "save";
        this.formData.k0406=dataInfo.k0406
        this.formData.k0407=dataInfo.k0407
        this.formData.k0408=dataInfo.k0408
      } else {
        this.formData=dataInfo;
      }
      this.$nextTick(() => {
        this.visible = false;
      });
    },
    //新增
    addMediaInfo() {
      this.modalTitle = "新增";
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.characterSceneManagerMedia.editFlag = this.editFlag
        this.$refs.characterSceneManagerMedia.init(null);
      });
    },
    //编辑
    editMediaInfo(row) {
      this.modalTitle = "编辑";
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.characterSceneManagerMedia.editFlag = this.editFlag;
        if (row) {
          row.flag = "edit";
        }
        this.$refs.characterSceneManagerMedia.init(row);
      });
    },
    deleteMediaInfo(index) {
      modal.confirm({
        title: "确认删除吗？",
        onOk: () => {
          if (index) {
            this.formData.mediaList=[];
            this.formData.k0406="";
            this.formData.k0407="";
            this.formData.k0408="";
          }
        },
        onCancel: () => {},
      });
    },
    dowloadFile(row){
      let downloadUrl = fileDownloadUrl
      if (row.length>0){
        downloadUrl+=row
      }
      let a = document.createElement('a');
      a.href = downloadUrl;
      a.click();
    },
  },
}

</script>

<style lang="less" scoped>
.title {
  display: flex;
  line-height: 32px;
  padding: 5px 0px;

  p {
    flex: 0 0 auto;
    color: #2466d0;
    font-weight: bold;
    font-size: 15px;
  }
  span {
    flex: 0 0 auto;
    margin-left: 8px;
    color: red;
  }
}
.operate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(0, 0, 0, 0.85);
  margin-top: 10px;


  > div {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
  }


}
.media-wrap {
  margin-top: 15px;
  li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 15px;
    .item {
      flex: 0 0 auto;
      width: 18%;
      .desc {
        width: 100%;
        height: 21px;
        line-height: 21px;
        font-weight: bold;
        margin-bottom: 10px;
      }
      p {
        width: 100%;
        height: 32px;
        line-height: 30px;
        padding: 0 10px;
        border: 1px solid #3e9fc8;
        border-radius: 4px;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .btn-wrap {
        text-align: center;
      }
      img {
        width: auto;
        height: 90px;
        max-width: 98%;
        vertical-align: middle;
        cursor: pointer;
      }
      &.special {
        width: 5%;
      }
    }
  }
}
</style>